<template>
	<view class="pageContent">

		<view class="fixedBottom">
			<view class="fixedRight" :class="{'select':index==connectIndex}" @click="connectCli(index)"
				v-for="(item,index) in connectList" :key="index">
				{{item.name || '完成'}}{{index==0 && installNum ? '('+installNum+')' : ''}}
			</view>
		</view>

		<view class="remoteMain" @click="doorListCli(index)" v-for="(item,index) in doorList" :key="index">
			<view class="remoteNo">
				{{item.equipmentNumber ||'21PD0000005D'}}
			</view>
			<view class="remoteGate">{{item.installationName+'-'+ item.gatePostName}}</view>
			<view class="remoteSim">{{item.mac || '123'}}</view>
			<view class="remoteIns">
				<view class="remoteInsGo">去安装</view>
			</view>
		</view>

	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				doorList: 0,
				doorIndex: -1,
				connectList: [{
						name: '待安装',
						type: 1
					},
					{
						name: '待检修',
						type: 2,
					}
				],
				connectIndex: 0,
				installNum: 0,
			}
		},
		onLoad() {},
		onShow() {
			this.installTaskDetailsList(this.connectIndex)
		},
		methods: {
			connectCli(index) {
				this.connectIndex = index
				if (index == 0) {
					// this.doorList = 3
					// this.installNum = this.doorList.length || this.doorList
					// this.installNum = 3
					this.installTaskDetailsList(index)
				} else if (index == 1) {
					this.doorList = 0
				}
			},

			async installTaskDetailsList(index) {
				var type = this.connectList[index].type
				var url = '/UserServer/mini/install/installTaskDetailsList'
				var params = {
					"queryStatus": type,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				console.log('param',param)
				if (index == 0) {
					this.installNum = param.length
				}
				this.doorList = param
			},
			async doorListCli(index) {
				this.doorIndex = index
				var equipment = this.doorList[index]
				getApp().globalData.equipment = equipment
				this.installPage()
			},
			installPage() {
				wx.navigateTo({
					url: '/pages/index/install'
				})
			},

		},

	}
</script>

<style>
	.pageContent {
		display: flex;
		flex-direction: column;
		padding: 110rpx 0rpx 80rpx 0rpx;
	}


	.fixedBottom {
		position: fixed;
		display: flex;
		top: 0;
		left: 0;
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-weight: 600;
		z-index: 10;
		/* border: 1rpx solid #2035E0; */
	}


	.fixedRight {
		width: 0rpx;
		flex: 1;
		background: #fff;
	}

	.fixedRight.select {
		color: #2035E0;
	}

	.remoteMain {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
		/* width: 100%; */
		/* height: 120rpx; */
		border-radius: 20rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		background: #FFFFFF;
		margin-bottom: 12rpx;
		z-index: 0;
		/* border: 1px solid #E7E7E7; */
	}

	.remoteNo {
		width: 100%;
		height: 50rpx;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 1px solid #E7E7E7;
	}

	.remoteGate {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		line-height: 42rpx;
	}

	.remoteSim {
		height: 42rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.remoteIns {
		text-align: right;
	}

	.remoteInsGo {
		display: inline-block;
		width: 150rpx;
		height: 54rpx;
		border-radius: 6rpx;
		border: 1rpx solid #2035E0;
		text-align: center;
		line-height: 54rpx;
		color: #2035E0;
	}

	.remoteIco {
		position: absolute;
		top: 50%;
		left: 40rpx;
		margin-top: -25rpx;
		width: 56rpx;
		height: 46rpx;
		background: #84D7FF;
	}
</style>
